<template>
  <div class="box">
    <div class="left">
      <i v-if="user.userId === '0'" class="el-icon-upload2" style="position: absolute; top: -9px; left: -6px"></i>
      <el-avatar :size="35" :src="user.avatarImage" />
    </div>
    <div class="right">
      <div style="font-size: 18px">{{ user.username }}</div>
      <div
        style="font-size: 12px; color: #999; width: 155px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px"
      >
        <span v-if="message.message[message.message.length - 1].type === 2">[ 图片 ]</span>
        <span v-else>{{ message.message[message.message.length - 1].content }}</span>
      </div>
      <div style="position: absolute; font-size: 10px; right: 6px; top: 5px">
        {{ message.message[message.message.length - 1].time }}
      </div>
      <div v-if="message.number !== 0" class="badge">
        {{ message.number }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    props: {
      message: {
        type: Object,
        required: true,
      },
      user: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {}
    },
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .box {
    display: flex;
    height: 80px;
    .left {
      margin-top: 10px;
      flex: 1;
      margin-left: 5px;
      position: relative;
    }
    .right {
      flex: 3;
      margin-top: 7px;
      margin-left: -10px;
      position: relative;
      .badge {
        width: 14px;
        height: 14px;
        background-color: red;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        right: 5px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
</style>
